<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动审核</el-breadcrumb-item>
      <el-breadcrumb-item>审核活动</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="9">
            <el-input placeholder="请输入秒杀名称搜索" v-model="searchValue">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchId"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="15">
            <img src="../../assets/bank2.png" alt="" class="createBtn" />
          </el-col>
        </el-row>
        <!-- <el-button style="float: right; padding: 3px 0" type="primary">发布</el-button> -->
        <!-- <el-button type="primary" class="createBtn">发布</el-button> -->
      </div>

      <!-- table -->
      <el-table
        :data="applyList"
        style="width: 100%; font-size: 12px"
        border
        stripe
      >
        <!-- <el-table-column type="index"> </el-table-column> -->
        <el-table-column
          width="80"
          prop="user.user_id"
          label="用户编号"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="user.user_name"
          label="用户姓名"
        ></el-table-column>
        <el-table-column
          width="80"
          prop="activity.activity_id"
          label="产品编号"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="activity.activity_name"
          label="产品名称"
        >
        </el-table-column>
        <el-table-column prop="activity.activity_rule" label="审核规则">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="address" label="审核" width="110px">
          <template slot-scope="scope">
            <!-- 通过 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="通过审核"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="success"
                icon="el-icon-check"
                size="small"
                circle
                @click="
                  passApply(
                    scope.row.app_id,
                    scope.row.user_id,
                    scope.row.activity_id
                  )
                "
              ></el-button>
            </el-tooltip>
            <!-- 不通过 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="驳回"
              placement="top"
              :enterable="false"
            >
              <el-button type="info" icon="el-icon-close" size="small" circle @click="
                  notpassApply(
                    scope.row.app_id,
                    scope.row.user_id,
                    scope.row.activity_id
                  )
                "></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getAllApply, setApplyStatus } from "../../network/auditing.js";
export default {
  data() {
    return {
      dialogVisible: false,
      //分页
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      applyList: [],
      total: 0,
      currentPage: 0,
      searchValue: "",
      realTime: "",
      status: 0,
      pass: 1,
      notpass: 2,
    };
  },
  created() {
    this.getAllApply(
      this.status,
      this.queryInfo.pagesize,
      this.queryInfo.pagenum
    );
  },
  methods: {
    getAllApply(status, pagesize, pagenum) {
      getAllApply(status, pagesize, pagenum).then((res) => {
        console.log(res);
        this.applyList = res.data;
        console.log(this.applyList);
        this.total = parseInt(res.other);
      });
    },
    // 分页
    handleSizeChange(val) {
      // 请求数据记得绑定一下请求数量
      console.log(val);
      this.queryInfo.pagesize = val;
      this.getActivities(this.queryInfo.pagesize, this.queryInfo.pagenum);
    },
    handleCurrentChange(val) {
      // this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.queryInfo.pagenum = val;
      this.getActivities(this.queryInfo.pagesize, this.queryInfo.pagenum);
    },
    //通过审核
    passApply(app_id, user_id, activity_id) {
      this.$confirm("请确认该用户是否符合要求, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "成功通过!",
          });
          setApplyStatus(app_id, user_id, activity_id, this.pass).then(
            (res) => {
              // console.log(res)
              if (res.data == true) {
                this.getAllApply(
                  this.status,
                  this.queryInfo.pagesize,
                  this.queryInfo.pagenum
                );
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 驳回
    notpassApply(app_id, user_id, activity_id) {
      this.$confirm("请确认该用户是否符合要求, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "成功驳回!",
          });
          setApplyStatus(app_id, user_id, activity_id, this.notpass).then(
            (res) => {
              // console.log(res)
              if (res.data == true) {
                this.getAllApply(
                  this.status,
                  this.queryInfo.pagesize,
                  this.queryInfo.pagenum
                );
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //搜索
    searchId() {},
  },
};
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.createBtn {
  width: 150px;
  height: 35px;
  float: right;
  padding: 3px 0;
  margin-top: -6px;
}
.el-pagination {
  margin-top: 15px;
}
</style>